<template>
  <div class="main">
    <!--    顶部导航条-->
    <navheader></navheader>
<!--    中间内容-->
    <div class="ml-5 mr-3 text-center" style="margin-top: 90px">
      <!-- 顶部导航栏 -->
      <nav class="topnav navbar navbar-expand-lg navbar-dark border-bottom ml-4" >
        <div class="">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="">
            <router-link to="/Colleges">
              <img alt="Brand" :src="imgs.bow" style="width: 40px;margin:5px;">
              <a class="navbar-brand" href="javascript:void(0);" style="font-size: 25px;color: black" @click="return_befo()">
                返回
              </a>
            </router-link>
          </div>
        </div><!-- /.container-fluid -->
      </nav>
      <div class="row m-4">
        <div class="card text-center">
          <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs">
              <li class="nav-item">
                <a class="nav-link active" href="#">具体院校信息</a>
              </li>
            </ul>
          </div>
          <div class="card-body">
            <div class="media mt-3">
              <div class="col-md-4">
                <img :src="'/api/storage/college_img/'+collegeInfo.college_img" class="align-self-start" alt="..." style="height:100%;width:100%;border-radius:5px">
              </div>
              <div class="col-md-8 media-body">
                <div class="col_p text-left" style="font-size: 20px">
                  <p>
                    <span class="text-center font-weight-bold" style="font-size: 30px;color: #0f5da2">
                    {{this.collegeInfo.college_name}}
                    </span>
                    <el-button @click="collect(collegeInfo.college_id)"
                               type="danger" plain
                               style="float: right">
                      <i class="fa fa-star-o"></i>{{ if_now_user_collect }}
                    </el-button>
                  </p>

                  <p><span class="font-weight-bold">院校隶属：</span><span>{{this.collegeInfo.college_belong}}</span></p>
                  <p><span class="font-weight-bold">所在地区：</span><span>{{this.collegeInfo.college_city}}</span></p>
                  <p><span class="font-weight-bold">研招网网址：</span><a href="javascript:void(0);" @click="skip_site(collegeInfo.college_yz_url)">{{this.collegeInfo.college_yz_url}}</a></p>
                  <p><span class="font-weight-bold">研究生院官网：</span><a href="javascript:void(0);" @click="skip_site(collegeInfo.college_gf_url)">{{this.collegeInfo.college_gf_url}}</a></p>
                  <p><span class="font-weight-bold">院校标签：</span><span>{{this.collegeInfo.college_label}}</span></p>
                  <p><span class="font-weight-bold">院校简介：</span><span>{{this.collegeInfo.college_info}}</span></p>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <!--    底部导航条-->
    <myfooter></myfooter>
  </div>
</template>

<script>
import myfooter from '../../myfooter'
import navheader from '../../navheader'
import bow from "@/assets/register/bow.png"
import {addCollect, cancelCollect, getColInfoByColID, ifCollect} from '@/api/College'

export default {
  name: "one_college",
  data(){
    return{
      imgs:{
        bow
      },
      college_id: this.$route.query.CollegeId,
      collegeInfo:[],
      if_now_user_collect:"取消收藏",
      if_now_user_collect_check:false,

    }
  },
  components:{
    myfooter,
    navheader
  },
  methods:{
    // 获取具体院校信息
    init(){

      getColInfoByColID({
        college_id:this.college_id,
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
          this.collegeInfo=res.data;
      });

    },
    //跳转该招生网址
    skip_site(college_site){
      // alert(college_site);
      window.open(college_site, '_blank');
    },
    //返回上一页
    return_befo(){
      this.$router.go(-1);
    },
    //  收藏院校或取消收藏
    collect(){

      //收藏
      if(this.if_now_user_collect_check==true){
        addCollect({
          college_id:this.college_id,
          // token:window.sessionStorage.getItem('token')
        }).then(result=>{
          if(result.data.code===1){
            this.$msg.success("收藏成功！");
            this.if_now_user_collect_check=false;
            this.if_now_user_collect="取消收藏";
          }else{
            this.$msg.error("收藏失败！");
          }
        });
      }
      else{
        //取消收藏
        cancelCollect({
          college_id:this.college_id,
          // token:window.sessionStorage.getItem('token')
        }).then(res=>{
          if(res.data.code===1){
            this.$msg.success("取消收藏成功！");
            this.if_now_user_collect_check=true;
            this.if_now_user_collect="点击收藏";
          }else{
            this.$msg.error("取消收藏失败！");
          }
        });
      }



    },
    //查询该用户是否收藏该院校
    check_collect(){

      ifCollect({
        college_id:this.college_id,
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
        //该用户已收藏该院校
        if(res.data.code==1){
          this.if_now_user_collect_check=false;
          this.if_now_user_collect="取消收藏";
        }else{
          this.if_now_user_collect_check=true;
          this.if_now_user_collect="点击收藏";
        }
      });
    },




  },

  created() {
    let _this=this;

    _this.check_collect();

    _this.init();
  }
}
</script>

<style scoped>
.main{

}
.col_p p{
  letter-spacing:3px;
}
</style>
